<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta http-equiv="x-ua-compatible" content="ie=edge">
		<title>活力川大</title>
		<link rel="stylesheet" href="../static/MDB/css/all.css">
	<link href="../static/MDB/css/bootstrap.min.css" rel="stylesheet">
	<link href="../static/MDB/css/mdb.min.css" rel="stylesheet">
	<link href="../static/MDB/css/style.css" rel="stylesheet">
	<link href="../static/layer/theme/default/layer.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/css/learningWorld.css">
	<link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
	<link rel="shortcut icon" href="../static/images/favicon.png">
	<link href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="../static/css/bpHS.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" href="../static/css/background3.css">
	</head>
	<body>
		<canvas id="canvas"></canvas>
		
		<header>
			  <nav class="navbar navbar-expand-lg navbar-dark mt-0" style="background: #ba2a17;">
				<div class="container">
					<a href="/index.html"><img src="../static/images/logo.png" width="40px"></a>
					<img src="../static/images/sportSCUwords.png" class="navbar-brand" style="margin-left: 10px;width: 140px;" id="navared">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav" aria-controls="basicExampleNav"
					 aria-expanded="false" aria-label="Toggle navigation">
						<span class="navbar-toggler-icon"></span>
					</button>
					<div class="collapse navbar-collapse" id="basicExampleNav">
						<ul class="navbar-nav mr-auto">
							<li class="nav-item" onclick="activeNav1()" id="nav1">
								<a class="nav-link" href="#lunbo" style="font-weight: normal; font-size: 20px;">轮播图</a>
							</li>
							<li class="nav-item" onclick="activeNav2()" id="nav2">
								<a class="nav-link" href="#building" style="font-weight: normal; font-size: 20px;">体育馆/比赛</a>
							</li>
							<li class="nav-item" onclick="activeNav3()" id="nav3">
								<a class="nav-link" href="#commentBlock" style="font-weight: normal; font-size: 20px;">留言</a>
							</li>
						</ul>
					</div>
					<audio src="../static/music/sport.mp3" autoplay="autoplay" controls id="music"></audio>
				</div>
			</nav>
		</header>
		
		<main>
			
			<div class="container-fluid">
				<div class="d-flex row align-items-center justify-content-center mt-4">
					<div class="container" >
						<div class="bp-hs" id="demo-default">
							<div class="bp-hs_inner" id="lunbo">
								<div class="bp-hs_inner__item" data-transform="scale">
									<img src="../static/images/study/carousel1.jpg" alt="Boompx Hero Slider 01" />
								</div>
								<div class="bp-hs_inner__item" data-transform="rotate" data-origin="top-left">
									<img src="../static/images/study/carousel2.jpg" alt="Boompx Hero Slider 02" />
								</div>
								<div class="bp-hs_inner__item" data-transform="rotate" data-origin="bottom-left">
									<img src="../static/images/study/carousel3.jpg" alt="Boompx Hero Slider 03" />
								</div>
								<div class="bp-hs_inner__item">
									<img src="../static/images/study/carousel4.jpg" alt="Boompx Hero Slider 04" />
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<div class="row align-items-center justify-content-center mt-4">
					<div class="col col-sm-2">
						<div class="card block ">
							<div class="view overlay" id="library" onclick="sports_meeting()">
								<img src="../static/images/sport/校运会.jpg" class="card-img-top" alt="" />
								<a>
									<div class="mask waves-effect waves-light rgba-white-slight"></div>
								</a>
							</div>
							<div class="card-body">
								<center><span class="badge badge-info">校运会</span></center>
							</div>
						</div>
					</div>
					<div class="col col-sm-2">
						<div class="card block ">
							<div class="view overlay" id="library" onclick="tianjing()">
								<img src="../static/images/sport/田径场.jpg" class="card-img-top" alt="" />
								<a>
									<div class="mask waves-effect waves-light rgba-white-slight"></div>
								</a>
							</div>
							<div class="card-body">
								<center><span class="badge badge-info">田径场</span></center>
							</div>
						</div>
					</div>
					<div class="col col-sm-2">
						<div class="card block ">
							<div class="view overlay" onclick="panshu_class()">
								<img src="../static/images/sport/攀树课.jpg" class="card-img-top" alt="" />
								<a>
									<div class="mask waves-effect waves-light rgba-white-slight"></div>
								</a>
							</div>
							<div class="card-body">
								<center><span class="badge badge-info">攀树课</span></center>
							</div>
						</div>
					</div>
					<div class="col col-sm-2">
						<div class="card block ">
							<div class="view overlay" onclick="jianmei_cao()">
								<img src="../static/images/sport/健美操.jpg" class="card-img-top" alt="" />
								<a>
									<div class="mask waves-effect waves-light rgba-white-slight"></div>
								</a>
							</div>
							<div class="card-body">
								<center><span class="badge badge-info">健美操</span></center>
							</div>
						</div>
					</div>
				</div>
				<div class="row align-items-center justify-content-center mt-4">
					<div class="col col-sm-2" id="building">
						<div class="card block ">
							<div class="view overlay" onclick="jiangan_tiyuguan()">
								<img src="../static/images/sport/江安体育馆.jpg" class="card-img-top" alt="" />
								<a>
									<div class="mask waves-effect waves-light rgba-white-slight"></div>
								</a>
							</div>
							<div class="card-body">
								<center><span class="badge badge-info">江安体育馆</span></center>
							</div>
						</div>
					</div>
					<div class="col col-sm-2">
						<div class="card block ">
							<div class="view overlay" onclick="wangjiang_tiyuguan()">
								<img src="../static/images/sport/望江体育馆.jpg" class="card-img-top" alt="图书馆外全景" />
								<a>
									<div class="mask waves-effect waves-light rgba-white-slight"></div>
								</a>
							</div>
							<div class="card-body">
								<center><span class="badge badge-info">望江体育馆</span></center>
							</div>
						</div>
					</div>
					<div class="col col-sm-2">
						<div class="card block ">
							<div onclick="ping_pong()">
								<div class="view overlay" class="view overlay">
									<img src="../static/images/sport/乒乓球.jpg" class="card-img-top" alt="图书馆外全景" />
									<a>
										<div class="mask waves-effect waves-light rgba-white-slight"></div>
									</a>
								</div>

							</div>
							<div class="card-body">
								<center><span class="badge badge-info">乒乓球</span></center>
							</div>
						</div>
					</div>
					<div class="col col-sm-2">
						<div class="card block ">
							<div onclick="huaxi_tiyuguan()">
								<div class="view overlay" class="view overlay">
									<img src="../static/images/sport/华西体育馆.jpg" class="card-img-top" alt="图书馆外全景" />
									<a>
										<div class="mask waves-effect waves-light rgba-white-slight"></div>
									</a>
								</div>

							</div>
							<div class="card-body">
								<center><span class="badge badge-info">华西体育馆</span></center>
							</div>
						</div>
					</div>
				</div>
				<div class="row align-items-center justify-content-center mt-4">
					<div class="col col-sm-2" id="building">
						<div class="card block ">
							<div class="view overlay" onclick="huodong()">
								<img src="../static/images/sport/活动中心.jpg" class="card-img-top" alt="" />
								<a>
									<div class="mask waves-effect waves-light rgba-white-slight"></div>
								</a>
							</div>
							<div class="card-body">
								<center><span class="badge badge-info">活动中心</span></center>
							</div>
						</div>
					</div>
					<div class="col col-sm-2">
						<div class="card block ">
							<div class="view overlay" onclick="basketball()">
								<img src="../static/images/sport/篮球赛.jpg" class="card-img-top" alt="图书馆外全景" />
								<a>
									<div class="mask waves-effect waves-light rgba-white-slight"></div>
								</a>
							</div>
							<div class="card-body">
								<center><span class="badge badge-info">篮球赛</span></center>
							</div>
						</div>
					</div>
					<div class="col col-sm-2">
						<div class="card block ">
							<div onclick="badminton()">
								<div class="view overlay" class="view overlay">
									<img src="../static/images/sport/羽毛球赛.jpg" class="card-img-top" alt="图书馆外全景" />
									<a>
										<div class="mask waves-effect waves-light rgba-white-slight"></div>
									</a>
								</div>

							</div>
							<div class="card-body">
								<center><span class="badge badge-info">羽毛球赛</span></center>
							</div>
						</div>
					</div>
					<div class="col col-sm-2">
						<div class="card block ">
							<div onclick="football()">
								<div class="view overlay" class="view overlay">
									<img src="../static/images/sport/足球赛.jpg" class="card-img-top" alt="图书馆外全景" />
									<a>
										<div class="mask waves-effect waves-light rgba-white-slight"></div>
									</a>
								</div>

							</div>
							<div class="card-body">
								<center><span class="badge badge-info">足球赛</span></center>
							</div>
						</div>
					</div>
					
					<div class="container-fluid mt-4">
						<div class="d-flex row" id="commentBlock">
							<img src="../static/images/leaf1.png" id="leaf1"
								style="width: 18%;height:auto;z-index: 1;position: absolute;left: 28%;margin-top: 26.5%;">
							<img src="../static/images/leaf2.png" id="leaf2"
								style="width: 19.2%;height:auto;z-index: 2;position: absolute;left: 41.4%;margin-top: 27.6%;">
							<img src="../static/images/leaf3.png" id="leaf3"
								style="width: 26.4%;height:auto;z-index: 3;position: absolute;left: 46.4%;margin-top: 14%;">
							<img src="../static/images/leaf4.png" id="leaf4"
								style="width: 21.4%;height:auto;z-index: 4;position: absolute;left: 75%;margin-top: 22%;">
							<img src="../static/images/leaf5.png" id="leaf5"
								style="width: 17.8%;height:auto;z-index: 1;position: absolute;left: 6%;margin-top: 23%;">
							<div id="userComment1"
								style="width: 16%;height:auto;z-index: 1;position: absolute;left: 27.5%;margin-top: 33%;transform:rotate(320deg);word-break: break-all;font-size: 0.75vw;">
							</div>
							<div id="userComment2"
								style="width: 16%;height:auto;z-index: 1;position: absolute;left: 44.3%;margin-top: 35%;transform:rotate(30deg);word-break: break-all;z-index: 5;font-size: 0.75vw;">
							</div>
							<div id="userComment3"
								style="width: 18%;height:auto;z-index: 1;position: absolute;left: 49%;margin-top: 19%;transform:rotate(345deg);word-break: break-all;z-index: 5;font-size: 0.75vw;">
							</div>
							<div id="userComment4"
								style="width: 15%;height:auto;z-index: 1;position: absolute;left: 82.5%;margin-top: 28.5%;transform:rotate(49deg);word-break: break-all;z-index: 5;font-size: 0.75vw;">
							</div>
							<div id="userComment5"
								style="width: 13.5%;height:auto;z-index: 1;position: absolute;left: 10%;margin-top: 28%;transform:rotate(35deg);word-break: break-all;z-index: 5;font-size: 0.75vw;">
							</div>
						</div>
						<div class="d-flex row  align-items-center justify-content-center mt-2">
							<div id="layerpage"></div>
						</div>
					</div>
			</div>
		</main>
		</section>
		<footer class="page-footer font-small pt-4" style="background: #ba2a17;">
			<div class="container-fluid text-center text-md-left" >
				<div class="row">
					<div class="col-md-2 mb-4">
						<img src="../static/images/beautySCUword.png" class="navbar-brand" style="margin-left: 10%;width: 60%;"
						id="navared">
						<img src="../static/images/logo.png" width="23%">
						
					</div>
					<div class="col-md-1 mb-4"></div>
					<div class="col-md-1 mb-4">闵  海</div>
					<div class="col-md-1 mb-4">吉天昊</div>
					<div class="col-md-1 mb-4">解思雨</div>
					<div class="col-md-1 mb-4">张新悦</div>
					<div class="col-md-4 mb-4">
						<form class="input-group" action="/postComments" method="post" enctype="multipart/form-data"
						id="commentSub">
							<input type="text" class="form-control form-control-sm" placeholder="请不要超过80字"
								aria-label="Your Comment" aria-describedby="basic-addon2" name="content">
							<input value="page3" name="page" style="display: none;">
							<div class="input-group-append">
								<input type="button" class="btn btn-sm btn-outline-white my-0"
												value="留言" onclick="submitForm();">
							</div>
						</form>
					</div>
					<hr style="height:3px;color: #f1efef;width: 66%;margin-top: 0px;position: absolute;right: 9%;margin-top: 2%;" />
					<div class="col-md-3"></div>
					<div class="col-md-6" >
						<p style="margin-top: -3%;">意气风发，激越昂扬，中流击水，志在四方。</p>
					</div>
				</div>
			</div>
			<div class="footer-copyright text-center py-3 mt-3">© 2020 Copyright:
				<a href="#">BestSCU</a>
			</div>
		</footer>
		<script type="text/javascript" src="../static/MDB/js/jquery.min.js"></script>
		<script type="text/javascript" src="../static/MDB/js/popper.min.js"></script>
		<script type="text/javascript" src="../static/MDB/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../static/MDB/js/mdb.min.js"></script>
		<script type="text/javascript" src="../static/layer/layer.js"></script>
		<script src="../static/js/jquery-form.js" type="text/javascript"></script>
		<script src="../static/layui/layui.js"></script>
		<script src="../static/layui/lay/modules/laypage.js"></script>
		<script src="../static/js/sport.js" type="text/javascript"></script>

		<script src="../static/js/vendors/jquery.touchSwipe.min.js"></script>
		<script src="../static/js/bpHS.js" type="text/javascript"></script>
		<script src="../static/js/lunbo.js" type="text/javascript"></script>
		<script src="../static/js/background3/script.js"></script>
		<script src="../static/js/background3/TweenMax.min.js"></script>
	</body>

</html>
